<template>
  <div>
    <a-alert
      message="Attention"
      description="提交审核后将无法退回, 提交前请仔细核对信息."
      show-icon
      style="margin-bottom: 10px"
    />
    <a-card :bordered="false" title="基本信息">
      <purchaseOutBasic ref="purchaseOutBasic" :disabled="disabled" @orderModalOpen="handleOrderModalOpen"/>
    </a-card>
    <a-card title="物品信息" :bordered="false">
      <a-table
        rowKey="id"
        :columns="columns"
        :dataSource="table.data"
        :pagination="false">
        <template slot="salePrice" slot-scope="text">
          <a-input
            addon-before="￥"
            :maxLength="4"
            :defaultValue="text"
            style="width: 100px; text-align: center;"/>
        </template>
        <template slot="saleAmount" slot-scope="text, record">
          <a-input
            :addon-after="record.unit"
            :maxLength="4"
            :defaultValue="text"
            style="width: 100px; text-align: center;"/>
        </template>
        <template slot="totalPrice" slot-scope="text, record">
          <span style="color: red">{{ record.price * record.amount }} 元</span>
        </template>
      </a-table>
    </a-card>
    <footer-tool-bar>
      <a-button type="primary" @click="handleSubmit" v-if="!disabled">提交审核</a-button>
      <a-button type="primary" @click="toAuditDetail" v-else>审核状态</a-button>
    </footer-tool-bar>
    <a-modal
      :visible="modal.orderVisible"
      title="已入库的订单"
      width="850px"
      @ok="handleOrderModalOk"
      @cancel="handleOrderModalCancel">
      <a-alert showIcon style="margin-bottom: 10px">
        <template slot="message">
          <span style="margin-right: 12px">已选择: <a style="font-weight: 600">{{ modal.selectedRowKeys.length }}</a>项</span>
          <a style="margin-left: 20px" @click="clearSelected" v-if="modal.selectedRowKeys.length > 0">清空</a>
        </template>
      </a-alert>
      <a-table
        rowKey="id"
        :columns="orderColumns"
        :dataSource="modal.orderData"
        :pagination="false"
        :rowSelection="{ selectedRowKeys: modal.selectedRowKeys, onChange: handleModalTableSelectChange, type: 'radio'}">
      </a-table>
    </a-modal>
  </div>
</template>

<script>
import footerToolBar from './components/footerToolbar'
import purchaseOutBasic from './components/purchaseOutBasic'
import { orderList, detail } from '@/api/purchase'
import { purchaseOutRepoAdd } from '@/api/repoManage'
import cloneDeep from 'lodash.clonedeep'

export default {
  name: 'PurchaseOutRepo',
  components: { purchaseOutBasic, footerToolBar },
  data () {
    return {
      modal: {
        orderVisible: false,
        selectedRowKeys: [],
        orderData: []
      },
      table: {
        data: []
      },
      disabled: false
    }
  },
  computed: {
    columns () {
      return [
        {
          title: '物品编号',
          dataIndex: 'code',
          align: 'center'
        },
        {
          title: '物品名',
          dataIndex: 'name',
          align: 'center'
        },
        {
          title: '单位',
          dataIndex: 'unit',
          align: 'center'
        },
        {
          title: '单价',
          dataIndex: 'price',
          align: 'center',
          scopedSlots: { customRender: 'salePrice' }
        },
        {
          title: '数量',
          dataIndex: 'amount',
          align: 'center',
          scopedSlots: { customRender: 'saleAmount' }
        },
        {
          title: '总计',
          scopedSlots: { customRender: 'totalPrice' },
          align: 'center'
        }
      ]
    },
    orderColumns () {
      const columns = [
        {
          title: '订单编号',
          dataIndex: 'code',
          align: 'center'
        },
        {
          title: '供应商',
          dataIndex: 'supplier',
          align: 'center'
        },
        {
          title: '采购员',
          dataIndex: 'purchaser',
          align: 'center'
        },
        {
          title: '采购时间',
          dataIndex: 'purchaseTime',
          align: 'center'
        },
        {
          title: '在库状态',
          dataIndex: 'hasIn',
          align: 'center',
          customRender: (text, record, index) => {
            if (text === 0) {
              return <a-badge status="default" text="不在仓库"/>
            } else if (text === 1) {
              return <a-badge status="processing" text="入库中"/>
            } else {
              return <a-badge status="success" text="已入库"/>
            }
          }
        }
      ]
      return columns
    }
  },
  created () {
    this.getOrderList()
  },
  methods: {
    getOrderList () {
      const _this = this
      orderList()
      .then(function (res) {
        _this.modal.orderData = res.data.list.filter(item => item.hasIn === 2 && item.hasReject === 0)
      }).catch(function (err) {
        _this.$message.error(err.response.data.msg || '获取订单列表失败')
      }).finally(function () {
      })
    },
    getStuffDetail (code) {
      const _this = this
      detail(code)
      .then(res => {
        _this.table.data = res.data.supplies
        _this.$refs.purchaseOutBasic.form.structure.setFieldsValue({
          location: res.data.location
        })
      })
      .catch(err => {
        _this.$message.error(err.response.data.msg || '获取物品数据失败')
      })
    },
    handleOrderModalOk () {
      // 将选中的item 放进去
      if (this.modal.selectedRowKeys.length > 0) {
        const arr = cloneDeep(this.modal.orderData.filter(item => this.modal.selectedRowKeys.includes(item.id)))
        this.$refs.purchaseOutBasic.form.structure.setFieldsValue({
          code: arr[0].code
        })
        this.getStuffDetail(arr[0].code)
      }
      // 关掉 modal
      this.handleOrderModalCancel()
    },
    handleOrderModalOpen () {
      this.modal.orderVisible = true
    },
    handleOrderModalCancel () {
      this.clearSelected()
      this.modal.orderVisible = false
    },
    clearSelected () {
      this.handleModalTableSelectChange([])
    },
    handleModalTableSelectChange (selectedRowKeys) {
      this.modal.selectedRowKeys = selectedRowKeys
    },
    // 提交
    handleSubmit () {
      const _this = this
      this.$refs.purchaseOutBasic.form.structure.validateFields((err, values) => {
        if (!err) {
          purchaseOutRepoAdd({
            code: values.code,
            outRepoTime: values.outRepoTime,
            repoManager: values.repoManager,
            location: values.location,
            auditor: values.auditor,
            outRepoRemark: values.outRepoRemark
          })
          .then(res => {
            _this.$message.success('成功提交退货单进行审批,请等待审批结果.')
            _this.$router.push('/repo/purchaseOutRepoManage')
          })
          .catch(err => {
            _this.$message.error(err.response.data.msg || '提交失败.')
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.ant-card {
  margin-bottom: 10px;
}
/deep/ .ant-input-group-addon {
  padding: 0 6px
}
/deep/ .ant-table-tbody > tr > td {
  padding: 12px 10px;
}
</style>
